<form ng-submit="submitForm()">
	<div class="options-group">
		<div class="options-content">

			<h3 ng-show="method == 'edit'" class="options-group-heading">Properties of pool {{ pool.name }}</h3>
			<h3 ng-show="method == 'add'" class="options-group-heading">Properties of new pool</h3>

			<div class="option">
				<dl>
					<dt>
						Name <span class="required" uib-tooltip="This field is required, please fill in! :-)">*</span>
					</dt>
					<dd>
						<input type="text" name="name" ng-model="pool.name"></td>
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Description
					</dt>
					<dd>
					<input type="text" style="width: 80%;"
						name="description"
						ng-model="pool.description"
						uib-tooltip="Enter a short description of what this pool is used for.">
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Tags
					</dt>
					<dd>
						<tags-input ng-model="pool.tags"></tags-input>
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Default type
					</dt>
					<dd>
					<input type="radio" id="radio-default-type-reservation"
						uib-tooltip="Reservation are for reserving a network for later assigning as specific assignments"
						name="default_type"
						value="reservation"
						ng-model="pool.default_type">
					<label for="radio-default-type-reservation" uib-tooltip="Reservation are for reserving a network for later assigning as specific assignments">
						Reservation
					</label>
					<input type="radio" id="radio-default-type-assignment"
						uib-tooltip="A single subnet, for a specific use in the network"
						name="default_type"
						value="assignment"
						ng-model="pool.default_type">
					<label for="radio-default-type-assignment" uib-tooltip="A single subnet, for a specific use in the network">
						Assignment
					</label>
					<input type="radio" id="radio-default-type-host"
						uib-tooltip="A single host within an assignment"
						name="default_type"
						value="host"
						ng-model="pool.default_type">
					<label for="radio-default-type-host" uib-tooltip="A single host within an assignment" >
						Host
					</label>
					<a href="javascript:void(0);" onclick="displayPrefixTypeHelp();" style="font-size: 10px; padding-left: 30px;">help on prefix types?</a>
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Default IPv4 prefix length
					</dt>
					<dd>
					<input type="text" name="ipv4_default_prefix_length"
						ng-model="pool.ipv4_default_prefix_length"
						uib-tooltip="The default IPv4 prefix length of prefixes assigned from this pool. Should be an integer value, for example 24 or 31.">
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Default IPv6 prefix length
					</dt>
					<dd>
					<input type="text" name="ipv6_default_prefix_length"
						ng-model="pool.ipv6_default_prefix_length"
						uib-tooltip="The default IPv6 prefix length of prefixes assigned from this pool. Should be an integer value, for example 64 or 112.">
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option" ng-show="method == 'edit'">
				<dl>
					<dt>
						Implied VRF
					</dt>
					<dd>
					<span uib-tooltip="The implied VRF is the VRF to which prefixes that are members of this pool belong.">
						<span ng-show="pool.vrf !== null">{{ pool.vrf.rt }} - {{ pool.vrf.name }}</span>
						<span ng-show="pool.vrf === null">No implied VRF available as the pool does not contain any prefixes.</span>
					</span>
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Extra Attributes
					</dt>
					<dd>
						<table style="width: 100%;">
							<tbody>
								<tr ng-repeat="avp in pool.avps">
									<td class="col-md-4" style="padding: 0;">
										<input type="text" style="width: 90%;" ng-model="avp.attribute" ng-required="avp.value"> <b>=</b>
									</td>
									<td class="col-md-7" style="padding: 0;">
										<input type="text" style="width: 100%;" ng-model="avp.value">
									</td>
									<td class="col-md-1" style="padding-top: 3px; padding-bottom: 3px;">
										<button type="button" class="btn btn-xs btn-danger" ng-click="removeAvp(avp)">
											<span class="glyphicon glyphicon-minus"></span> Remove
										</button>
									</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td></td>
									<td></td>
									<td style="padding-top: 5px;">
										<button type="button" class="btn btn-xs btn-success" ng-click="addAvp()">
											<span class="glyphicon glyphicon-plus"></span> Add attribute
									   </button>
									</td>
							</tfoot>
						</table>
					</dd>
				</dl>
			</div>


			<div class="rule" ng-show="method == 'edit'"></div>

			<div class="option">
				<dl>
					<dt>
					</dt>
					<dd>
						<button class="btn btn-success" ng-show="method == 'add'">Add pool</button>
						<button class="btn btn-success" ng-show="method == 'edit'">Save pool</button>
					</dd>
				</dl>
	 		</div>

		</div>
	</div>
</form>
